<template>
  <form-dialog ref="formDrawerRef" title="新增车辆" top="2vh" width="98%" @submit="handleSubmit">
    <div class="dialog-body">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="160px">
        <el-row :gutter="0">
          <!-- item.value == 'carGrade' && form[item.value] != 1 ? 3 :  -->
          <el-col
            v-for="item in configList"
            :key="item.value"
            :span="item.value == 'carGrade' && form['carCategory'] != 1 ? 0 : item.span"
          >
            <!-- {{ form[item.value] }} - {{ item.value }} -->

            <template
              v-if="item.types === 'select' && item.value == 'carGrade' && form['carCategory'] == 1"
            >
              <!-- {{ item.value }} - {{ form[item.value] }} -->
              <el-form-item :label="item.label" :prop="item.value">
                <el-select v-model="form[item.value]" :placeholder="item.placeholder" size="large">
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-if="item.types === 'input'">
              <el-form-item :label="item.label" :prop="item.value">
                <el-input
                  v-model="form[item.value]"
                  :placeholder="item.placeholder"
                  size="large"
                ></el-input>
              </el-form-item>
            </template>
            <template v-else-if="item.types === 'Number'">
              <el-form-item :label="item.label" :prop="item.value">
                <el-input-number
                  :min="item.min"
                  :precision="item.precision ? item.precision : 0"
                  v-model="form[item.value]"
                  :placeholder="item.placeholder"
                  style="width: 100%"
                  size="large"
                ></el-input-number>
              </el-form-item>
            </template>
            <!-- carRegisterPlaceCodeCode -->
            <template v-else-if="item.types === 'select' && item.value != 'carGrade'">
              <!-- {{ item.value }} - {{ form[item.value] }} -->
              <el-form-item
                v-if="item.value == 'carRegisterPlaceCode'"
                :label="item.label"
                :prop="item.value"
              >
                <el-select v-model="form[item.value]" :placeholder="item.placeholder" size="large">
                  <el-option
                    v-for="option in areaList"
                    :key="option.areaCode"
                    :label="option.area"
                    :value="option.areaCode"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-else :label="item.label" :prop="item.value">
                <el-select v-model="form[item.value]" :placeholder="item.placeholder" size="large">
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-else-if="item.types === 'time'">
              <el-form-item :label="item.label" :prop="item.value">
                <el-date-picker
                  v-model="form[item.value]"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                  size="large"
                ></el-date-picker>
              </el-form-item>
            </template>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </form-dialog>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "vue";
import { useInitForm } from "@/hooks/useCommon";
import FormDialog from "@/components/FormDialog.vue";
import { addAnnualVehicle } from "@/api/annualAudit";
import { ElMessage } from "element-plus";

const { formDrawerRef, formRef, form, rules, handleEdit, handleCreate } = useInitForm({
  form: {
    businessStatus: "",
    carCategory: "",
    carRegisterPlaceCode: "",
    carType: "",
    companyName: "",
    licensePlate: "",
    licensePlateColor: "",
    registerDate: ""
  },
  rules: {
    licensePlate: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
    licensePlateColor: [{ required: true, message: "请选择车牌颜色", trigger: "blur" }],
    carRegisterPlaceCode: [{ required: true, message: "请选择车籍地", trigger: "blur" }],
    carCategory: [{ required: true, message: "请选择车辆类别", trigger: "blur" }],
    carType: [{ required: true, message: "请选择车辆类型", trigger: "blur" }],
    companyName: [{ required: true, message: "请输入所属企业", trigger: "blur" }],
    businessStatus: [{ required: true, message: "请选择营运状态", trigger: "blur" }],
    registerDate: [{ required: true, message: "请选择上牌日期", trigger: "blur" }]
  }
});
const configList = ref([
  {
    types: "input",
    span: 8,
    label: "车牌号码",
    value: "licensePlate",
    width: "100px",
    placeholder: "请输入车牌号码"
  },
  {
    types: "select",
    span: 8,
    label: "车辆颜色",
    value: "licensePlateColor",
    width: "100px",
    placeholder: "请选择车辆颜色",
    options: [
      {
        label: "黄色",
        value: 1
      },
      {
        label: "蓝色",
        value: 2
      },
      {
        label: "绿色",
        value: 3
      },
      {
        label: "渐变绿",
        value: 4
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "车籍地",
    value: "carRegisterPlaceCode",
    width: "100px",
    placeholder: "请选择车籍地",
    options: [
      {
        label: "农客",
        value: 1
      },
      {
        label: "非农客",
        value: 2
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "车辆类别",
    value: "carCategory",
    width: "100px",
    placeholder: "请选择车辆类别",
    options: [
      {
        label: "客运车辆",
        value: 1
      },
      {
        label: "普货车辆",
        value: 2
      },
      {
        label: "危货车辆",
        value: 3
      },
      {
        label: "公交车辆",
        value: 4
      },
      {
        label: "巡游出租车辆 ",
        value: 5
      },
      {
        label: "网约出租车",
        value: 6
      },
      {
        label: "教练车辆 ",
        value: 7
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "车辆类型",
    value: "carType",
    width: "100px",
    placeholder: "请选择车辆类型",
    options: [
      {
        label: "小型客车",
        value: 1
      },
      {
        label: "中大型客车",
        value: 2
      },
      {
        label: "货车及挂车",
        value: 3
      },
      {
        label: "危险品运输车",
        value: 4
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "客车类型等级",
    value: "carGrade",
    width: "100px",
    placeholder: "请选择客车类型等级",
    options: [
      {
        label: "特大型高三级",
        value: 1
      },
      {
        label: "特大型高二级",
        value: 2
      },
      {
        label: "特大型高一级",
        value: 3
      },
      {
        label: "特大型中级",
        value: 4
      },
      {
        label: "特大型普通级",
        value: 5
      },
      {
        label: "大型高三级",
        value: 6
      },
      {
        label: "大型高二级",
        value: 7
      },
      {
        label: "大型高一级",
        value: 8
      },
      {
        label: "大型中级",
        value: 9
      },
      {
        label: "大型普通级",
        value: 10
      },
      {
        label: "中型高二级",
        value: 11
      },
      {
        label: "中型高一级",
        value: 12
      },
      {
        label: "中型中级",
        value: 13
      },
      {
        label: "中型普通级",
        value: 14
      },
      {
        label: "小型高二级",
        value: 15
      },
      {
        label: "小型高一级",
        value: 16
      },
      {
        label: "小型中级",
        value: 17
      },
      {
        label: "小型普通级",
        value: 18
      },
      {
        label: "乘用车高级",
        value: 19
      },
      {
        label: "乘用车中级",
        value: 20
      },
      {
        label: "其他",
        value: 21
      }
    ]
  },
  {
    types: "input",
    span: 8,
    label: "所属企业",
    value: "companyName",
    width: "100px",
    placeholder: "请输入所属企业"
  },
  {
    types: "select",
    span: 8,
    label: "营运状态",
    value: "businessStatus",
    width: "100px",
    placeholder: "请选择营运状态",
    options: [
      {
        label: "营运",
        value: 1
      },
      {
        label: "停运",
        value: 2
      },
      {
        label: "挂失",
        value: 3
      },
      {
        label: "迁出（过户）",
        value: 4
      },
      {
        label: "迁出（转籍）",
        value: 5
      },
      {
        label: "报废",
        value: 6
      },
      {
        label: "歇业",
        value: 7
      },
      {
        label: "注销",
        value: 8
      },
      {
        label: "其他",
        value: 9
      },
      {
        label: "备案到省外",
        value: 10
      }
    ]
  },

  {
    types: "time",
    span: 8,
    label: "上牌日期",
    value: "registerDate",
    width: "140px",
    placeholder: "请选择上牌日期"
  },
  {
    types: "time",
    span: 8,
    label: "年审日期",
    value: "annualVerificationDate",
    width: "140px",
    placeholder: "请选择年审日期"
  },
  {
    types: "time",
    span: 8,
    label: "年审有效期",
    value: "annualVerificationValidDate",
    width: "140px",
    placeholder: "请选择年审有效期"
  },
  {
    types: "input",
    span: 8,
    label: "许可证号",
    value: "licenseKey",
    width: "100px",
    placeholder: "请输入许可证号"
  },
  {
    types: "input",
    span: 8,
    label: "道路运输证",
    value: "roadTransportId",
    width: "100px",
    placeholder: "请输入道路运输证"
  },
  {
    types: "input",
    span: 8,
    label: "核发机关",
    value: "issuedBy",
    width: "100px",
    placeholder: "请选择核发机关"
  },
  {
    types: "time",
    span: 8,
    label: "有效期起",
    value: "validDateStart",
    width: "140px",
    placeholder: "请选择起保日期"
  },
  {
    types: "time",
    span: 8,
    label: "有效期止",
    value: "validDateEnd",
    width: "140px",
    placeholder: "请选择终保日期"
  },
  {
    types: "input",
    span: 8,
    label: "车架号",
    value: "vin",
    width: "100px",
    placeholder: "请输入车架号"
  },
  {
    types: "input",
    span: 8,
    label: "发动机型号",
    value: "engineType",
    width: "100px",
    placeholder: "请输入发动机号"
  },
  {
    types: "select",
    span: 8,
    label: "燃料类型",
    value: "energyType",
    width: "100px",
    placeholder: "请选择燃料类型",
    options: [
      { value: 1, label: "汽油" },
      { value: 2, label: "柴油" },
      { value: 3, label: "电" },
      { value: 4, label: "混合油" },
      { value: 5, label: "天然气" },
      { value: 6, label: "液化天然气" },
      { value: 7, label: "甲醇" },
      { value: 8, label: "乙醇" },
      { value: 9, label: "太阳能" },
      { value: 10, label: "混合动力" },
      { value: 11, label: "无" }
    ]
  },
  {
    types: "input",
    span: 8,
    label: "厂牌",
    value: "brand",
    width: "100px",
    placeholder: "请输入厂牌"
  },
  {
    types: "input",
    span: 8,
    label: "车辆厂牌型号",
    value: "brandType",
    width: "100px",
    placeholder: "请输入车辆厂牌型号"
  },
  {
    types: "Number",
    span: 8,
    label: "车辆长度(mm)",
    value: "carLength",
    width: "100px",
    min: 1000,
    placeholder: "请输入车辆长度"
  },
  {
    types: "Number",
    span: 8,
    label: "车辆宽度(mm)",
    value: "carWidth",
    width: "100px",
    min: 1000,
    placeholder: "请输入车辆宽度"
  },
  {
    types: "Number",
    span: 8,
    label: "车辆高度(mm)",
    value: "carHeight",
    width: "300px",
    min: 1000,
    placeholder: "请输入车辆高度"
  },
  {
    types: "Number",
    span: 8,
    label: "核定载质量(kg)",
    value: "ratifiedQuality",
    width: "100px",
    min: 1.0,
    precision: 2,
    placeholder: "请输入核定载质量"
  },
  {
    types: "Number",
    span: 8,
    label: "核定载客位数",
    value: "ratifiedNum",
    width: "100px",
    min: 1,
    placeholder: "请输入核定载客位数"
  },
  {
    types: "select",
    span: 8,
    label: "车辆技术等级",
    value: "technicalGrade",
    width: "100px",
    placeholder: "请选择最近一年是否上线",
    options: [
      {
        label: "未评定",
        value: 1
      },
      {
        label: "一级",
        value: 2
      },
      {
        label: "二级",
        value: 3
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "报废年限",
    value: "scrapLimit",
    width: "100px",
    placeholder: "请选择最近一年是否上线",
    options: [
      {
        label: "5年",
        value: 1
      }
    ]
  }
]);

/** 获取区县列表 */
import { getAreaListApi } from "@/api/user";
// import { ItemStyleMixin } from "echarts/types/src/model/mixin/itemStyle.js";
type areaListType = { areaCode: string; area: string }[];
const areaList = ref<areaListType>([]);
/** 获取区县列表 */
const getAreaList = () => {
  getAreaListApi().then((response: any) => {
    areaList.value = response;
    // 车籍地
    // configList.find(item=>item.value=='carRegisterPlaceCode').options = response.map((item:any)=>{
    //   return {
    //     label:item.area,
    //     value:item.areaCode
    //   }
    // })
  });
};
getAreaList();

//表单验证
const handleSubmit = () => {
  // /formRef.value 是 表单对象，validate是进行表单验证的方法，
  // valid参数是验证结果，如果true验证通过，false表示验证不通过
  formRef.value?.validate((valid: any) => {
    console.log(form);
    if (valid == true) {
      addAnnualVehicle(form).then((res: any) => {
        console.log(res);
        if (res == true) {
          ElMessage.success("添加成功");
          (formDrawerRef.value as any)?.close();

          emit("refresh");
        } else {
          console.log(res);
          ElMessage.error("出错了");
        }
        //  form = {};
      });
    }
  });
};

const emit = defineEmits(["refresh"]);

// carGrade
defineExpose({
  handleEdit,
  handleCreate
});
</script>
<style scoped lang="scss">
.dialog-body {
  height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
